<template>
  <div id="app" class="bg-lofi-beige noise-bg min-h-screen flex flex-col font-lofi text-lofi-dark">
    <Header />
    <router-view></router-view>
  </div>
</template>

<script setup>
import Header from '@/components/Layout/Header.vue'
</script>

<style>
/* 引入Font Awesome */
@import 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';

:root {
  --lofi-beige: #f5f1e6;
  --lofi-brown: #8b7d6b;
  --lofi-dark: #4a443a;
  --lofi-accent: #b85c38;
  --lofi-light: #f9f6ef;
}

.font-lofi {
  font-family: 'Courier New', monospace, 'Comic Sans MS', cursive;
}
</style>